<template>
  <el-dialog
    title="批量导入"
    :visible.sync="dialogVisible">
    <div class="min-title">
      请先《<a
        v-download="getDownLoadUrl('upload/2021/2/25/试题库导入模板.xlsx')">下载导入模板</a>》
    </div>
    <upload-file
      ref="uploadFile"
      :config="config"
      :action="action"
      :file-upload-complete="fileUploadComplete"
      :is-import-file="true">
      <div>
        <el-button
          slot="trigger"
          size="small"
          type="primary">
          选择导入文件
        </el-button>
      </div>
    </upload-file>
    <span
      slot="footer"
      class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
      <el-button
        type="primary"
        :loading="loading"
        @click="importData">导 入</el-button>
    </span>
  </el-dialog>
</template>
<script>
  export default {
    props: {
      action: {
        type: String,
        default: `${process.env.VUE_APP_ADMIN_API}/exam-storage/batch-import`
      }
    },
    data() {
      return {
        // format[]
        loading: false,
        dialogVisible: false
      }
    },
    computed: {
      config() {
        return {
          autoUpload: false,
          multiple: false
        }
      }
    },
    methods: {
      getDownLoadUrl(url) {
        return `${process.env.VUE_APP_ADMIN_API}/${url}`
      },
      importData() {
        this.loading = true
        this.$refs.uploadFile.submit()
      },
      // 文件上传完成
      fileUploadComplete() {
        this.dialogVisible = false
        this.$refs.uploadFile.clearFiles()
        this.$message.success('文件导入成功')
        this.$emit('parentCb')
        this.loading = false
      },
      show() {
        this.dialogVisible = true
      }
    }
  }
</script>
<style lang="scss" scoped>
  .min-title{
    a{
      text-decoration: underline;
      cursor: pointer;
      color:#46a6ff;
    }
    margin-bottom: 20px;
  }
</style>
